<template>
  <div class="p-4">
    <MSearch :search="search" @search="changeSearch" v-model:initForm="searchForm"></MSearch>
    <MTable :table-data="tableData" :tableColumn="tableColumn" :is-selection="true" :is-index="true"
            v-model:pagination="pagination" @change="getPagination" :isOperation="false">
      <template #operation="props">
        <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" :hide-icon="true"
                       :hide-after="0" @confirm="handleDeleteArticle(props.row)" title="确认删除文章数据?">
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </MTable>
  </div>
</template>

<script setup>
import MToast from '@/components/MToast'
import {configInfo} from '@/api'
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()
import useConfigStore from '@/store/useConfigStore'

const {changeTheme} = useConfigStore()
onMounted(async () => {
  // const res = await configInfo()
  // console.log(res, 'res')
  // console.log(router, 'router')
})
const tableColumn = ref([
  {
    label: '标题',
    prop: 'title'
  },
  {
    label: '内容',
    prop: 'content'
  },
  {
    label: '创建时间',
    prop: 'createdAt',
    render: (rows) => {
      return `<div style="color:red" class="truncate">${rows.createdAt}</div>`
    }
  }
])
const tableData = ref([{
  title: '测试1',
  content: '测试内容1',
  createdAt: '2023-04-25 14:00:00'
}, {
  title: '测试2',
  content: '测试内容2',
  createdAt: '2023-04-25 14:00:00'
}, {
  title: '测试3',
  content: '测试内容3',
  createdAt: '2023-04-25 14:00:00'
}, {
  title: '测试4',
  content: '测试内容4',
  createdAt: '2023-04-25 14:00:00'
}, {
  title: '测试5',
  content: '测试内容5',
  createdAt: '2023-04-25 14:00:00'
}, {
  title: '测试6',
  content: '测试内容6',
  createdAt: '2023-04-25 14:00:00'
}])
const pagination = ref({
  size: 10,
  current: 1,
  total: 0
})

function getPagination() {
  console.log(pagination.value)
}

const search = ref([
  {label: '文章标题', prop: 'title', placeholder: '请输文章标题', required: true, type: 'input'},
  {label: '文章类容', prop: 'content', placeholder: '请输入文章类容', required: false, type: 'input'}
])
const searchForm = ref({
  title: '',
  content: ''
})

function changeSearch() {

}

function testToast() {
  // MToast.show('显示')
  changeTheme()
}

function goIframe() {
  router.push({
    path: '/iframe'
  })
  // router.addRoute({
  //   path: '/',
  //   component: () => import('@/layout/index.vue'),
  //   children: [
  //     {
  //       path: '/dynamic',
  //       name: 'dynamic',
  //       component: () => import('@/views/dynamic/index.vue')
  //     }
  //   ]
  // })
  // router.replace('/dynamic')
}
</script>

<style lang="scss" scoped>
.test {
  font-size: 50px;
  color: green;
}
</style>
